.<template>
  <div>
    <div class="box">
      <crack></crack>
      <logo></logo>
      <logInput
        inputType="text"
        placeh="用户名/手机号码"
        official="输入有误"
        regExp="^.{3,10}$"
        @tellValue="cusername"
      ></logInput>
      <logInput
        inputType="password"
        placeh="密码"
        official="输入有误"
        regExp="^.{6,8}$"
        @tellValue="cpassword"
      ></logInput>
      <logBtn btnName="登录" @tell="btnClick"></logBtn>
    </div>
    <p class="backLogin" ><router-link to="/register">前往注册页</router-link></p>

  </div>
</template>

<script>
import logo from "../components/logo";
import crack from "../components/crack";
import logInput from "../components/loginInput";
import logBtn from "../components/loginBtn";
// import { Toast } from 'vant';
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  components: {
    logInput,
    logBtn,
    logo,
    crack
  },
  methods: {
    //按钮点击
    btnClick() {
      // 1234 
      // AAA
      const username = this.username;
      const password = this.password;
      // console.log('登录',username,password);
     
      this.$axios({
        url: "/login",
        method: "post",
        data: {
          username,
          password
        }
      }).then(res => {
      const {statusCode,message} = (res.data)
         this.$toast.success(message);

       if(!statusCode){
      const {token} = res.data.data
      const {id} = res.data.data.user
         //登录成功跳转页面
     setTimeout(() => {
           localStorage.setItem('token',token)
           localStorage.setItem('user_id',id)
         this.$router.push({
           path:'/person'
         })
     }, 1000);
       }

      });
    },
    //输入框输入
    cusername(value) {
      this.username = value;
    },
    cpassword(value) {
      this.password = value;
    }
  },
  mounted() {
    localStorage.removeItem('token')
    localStorage.removeItem('user_id')
  },
};
</script>

<style lang="less" scoped >
.box {
  padding: 6.667vw;
}
.backLogin{
  text-align: center;
  color: green
}
</style>